<template>
    <div id="HorizontalBar" ref="HorizontalBar"></div>
</template>

<script>
// https://www.makeapie.com/editor.html?c=xFld9k5PeD
// https://www.makeapie.com/editor.html?c=xgNHRfHRfA
import { operationRate } from '@/api/api'
import echarts from 'echarts'
export default {
    props: {
        isReady: {
            type: Boolean
        }
    },
    watch: {
        isReady (newval, oldval) {
            if (newval) {
                this.$nextTick(() => {   //此处使用这个可以等节点渲染后再获取节点
                    // this.getCharts()
                    this.operationRate()
                })
            }
        }
    },
    data () {
        return {
            // chartTitle: '截止统计日期:  2021-01-01',
            echartElement: null,
            config: {}
        }
    },
    methods: {
        operationRate () {
            operationRate()
                .then(res => {
                    if (res.status == 200 && res.data.code == 2000) {
                        this.config.normal = res.data.data.normal
                        this.config.low = res.data.data.low
                        this.config.notOpen = res.data.data.notOpen
                    }
                    this.getCharts()
                })
                .catch(err => {
                    console.log(err);
                })
        },
        getCharts () {
            this.echartElement = echarts.init(this.$el)
            var getmydmc = ['运转率正常', '运转率低', '未开启',]; // 数据点名称
            var getmyd = [ // 数据值
                { // 正常
                    value: this.config.normal,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: 'rgba(90, 173, 117, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(90, 173, 117, 0)'
                            }]),
                        },
                    }
                },
                { // 运转率低
                    value: this.config.low,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: 'rgba(217, 109, 49, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(217, 109, 49, 0)'
                            }]),
                        },
                    }
                },
                { // 未开启
                    value: this.config.notOpen,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: 'rgba(246, 227, 150, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(246, 227, 150, 0)'
                            }]),
                        },
                    }
                },
            ]; // 数据值
            // var maxVal = getmyd.sort(function (a, b) {
            //     var v1 = a['value'];
            //     var v2 = b['value'];
            //     return v1 - v2;
            // })['value'];
            // console.log(maxVal);
            var getmydzd = []; // 100%数据值
            for (let i = 0; i < getmyd.length; i++) {
                getmydzd.push(65)
            }

            var option = {
                grid: {
                    left: '18%',
                    right: '10%',
                    bottom: '10%',
                    top: '30%',
                },
                title: {
                    // text: `截止统计日期:2021-01-26`,
                    text: `截止统计日期: ${this.$dateFormat('YYYY-mm-dd',(new Date().getTime()-(1000*60*60*24)))}`,
                    textStyle: {
                        align: 'left',
                        color: '#ccc',
                        fontSize: 15,
                    },
                    top: '15%',
                    left: '5%',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value
                    }
                },
                xAxis: {
                    show: false,
                    type: 'value'
                },
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        axisLabel: {
                            formatter: function (value) {
                                var ret = "";//拼接加\n返回的类目项  
                                var maxLength = 5;//每项显示文字个数  
                                var valLength = value.length;//X轴类目项的文字个数  
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                                if (rowN > 1)//如果类目项的文字大于5,
                                {
                                    var temp = "";//每次截取的字符串  
                                    var start = 0;//开始截取的位置  
                                    var end = maxLength;//结束截取的位置  
                                    temp = value.substring(start, end) + '\n' + value.substring(end, valLength)
                                    ret += temp; //凭借最终的字符串  
                                    return ret;
                                }
                                else {
                                    return value;
                                }
                            },
                            textStyle: {
                                color: '#fff',
                                fontSize: '14',
                                lineHeight: 20,
                            },
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: getmydmc
                    },
                    {
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '15'
                            },
                            formatter: '{value}'
                        },
                        data: getmyd
                    }
                ],
                series: [
                    {
                        name: '值',
                        type: 'bar',
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(90, 173, 117, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(90, 173, 117, 0)'
                                }]),
                            },
                        },
                        barGap: '-100%',
                        barWidth: 20,
                        data: getmyd
                    },
                    {
                        name: '背景',
                        type: 'bar',
                        barWidth: 35,
                        barGap: '-140%',
                        data: getmydzd,
                        itemStyle: {
                            normal: {
                                // color: 'rgba(0,46,121, .5)',
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(0,46,121, .5)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,46,121, .1)'
                                }]),
                                barBorderRadius: 20,
                            }
                        },
                    },
                ]
            };
            this.echartElement.setOption(option);
        }
    },
    mounted () {
        // setTimeout(() => {
        //     this.getCharts()
        // }, 3000);
    },
    beforeDestroy () {
        this.echartElement.dispose();
    }
}
</script>

<style lang="less" scoped>
#HorizontalBar {
    width: 100%;
    height: 100%;
}
</style>